<!--
 * @Description:
 * @Author: guoxiaxue
 * @Date: 2024-11-25 15:09:26
 * @FilePath: \ySelect-master\index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jQuery ySelect Plugin Demo</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="css/ySelect.css" rel="stylesheet" type="text/css" />

    <script src="js/bootstrap.min.js"></script>
    <script src="js/ySelect.js"></script>
    <style>
      .container {
        margin-top: 50px;
      }
      .fs-options .disabled {
        pointer-events: none; /* 禁用鼠标点击 */
        opacity: 0.5; /* 改变样式使禁用项看起来不活跃 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <select id="m1" class="demo" multiple="multiple">
        <option value="1">加多宝冰凉茶</option>
        <option value="2">饮料</option>
        <option value="3">太太乐鸡精</option>
        <option value="4">嘉士伯啤酒</option>
        <option value="5">成功图像类型</option>
        <option value="6">门店类型</option>
        <option value="7">终端类型</option>
      </select>

      <select id="m2" class="demo1" multiple="multiple">
        <option value="1">加多宝凉茶</option>
        <option value="2">饮料</option>
        <option value="3">太太乐鸡精</option>
        <option value="4">嘉士伯啤酒</option>
        <option value="5">成功图像类型</option>
        <option value="6">门店类型</option>
      </select>
      <br />
      <!-- <button id="current" class="btn btn-primary btn-sm">查看值</button> -->
    </div>

    <script>
      $(function () {
        $("#m1").ySelect({
          placeholder: "请先选择一些项目", //提示信息
          searchText: "搜索", //下拉搜索占位符
          showSearch: false, //显示搜索 (true/false)
          numDisplayed: 2, //超出数量整合
          overflowText: "已选中 {n}项", //超出数量整合文本提示,{n}为数量
        });

        $(".demo1").ySelect({
          placeholder: "请先选择一些项目", //提示信息
          searchText: "搜索", //下拉搜索占位符
          showSearch: true, //显示搜索 (true/false)
          numDisplayed: 4, //超出数量整合
          overflowText: "已选中 {n}项", //超出数量整合文本提示,{n}为数量
        });
        // 调用限制最多选择两个选项的方法
        $(".demo1").ySelectDefault(2);
        $("#m1").ySelectDefault(2);
        var selectedValues = $("#m1").ySelectVal(); // 获取当前选中的值
        console.log(selectedValues.length, "测斜的长度000000");
        var $options = $("#m1").prev().find(".fs-options>div"); // 获取所有的选项
        if (selectedValues.length == 2) {
          console.log("如果元素的长度为2,那么其他项就不让点击");

          // 禁用其他未选中的选项
          $options.each(function () {
            var $option = $(this);
            if (!$option.hasClass("selected")) {
              $option.addClass("disabled"); // 添加禁用类
              $option.off("click"); // 移除点击事件
            }
          });
        }
        // 恢复之前选中的数据点
        $("#current").click(function () {
          console.log($("#m2").ySelectedValues(","));
          console.log($("#m2").ySelectedTexts(","));
        });
      });

      $("#m1").change(function () {
        var $select = $(this);
        var selectedValues = $select.ySelectVal(); // 获取当前选中的值
        var $options = $select.prev().find(".fs-options>div"); // 获取所有的选项
        if (selectedValues.length == 2) {
          console.log("如果元素的长度为2,那么其他项就不让点击");

          // 禁用其他未选中的选项
          $options.each(function () {
            var $option = $(this);
            if (!$option.hasClass("selected")) {
              $option.addClass("disabled"); // 添加禁用类
              $option.off("click"); // 移除点击事件
            }
          });
        } else {
          console.log("选中的值小于2，允许点击其他项");
          // 启用所有选项的点击事件
          $options.each(function () {
            var $option = $(this);
            if ($option.hasClass("disabled")) {
              $option.removeClass("disabled"); // 移除禁用类
              $option.on("click", function () {
                // 你可以在这里添加选项点击事件的逻辑
                console.log("选中项:", $option.text());
              });
            }
          });
        }
      });
    </script>
  </body>
</html>
